<template>
    <div class="mainbody">
      <el-container>
        <el-row>
          <el-col :span="4" text-align="right" font-size="14px">
            <div @click="goToLogin" v-if="this.$root.userName == null || this.$root.userName == ''">请登录</div>
            <div v-if = " this.$root.userName != null && this.$root.userName != '' ">你好!&nbsp;&nbsp;&nbsp;&nbsp;{{this.nickName}}</div>
            <div>&nbsp;</div>
          </el-col>
        </el-row>
        <el-header>
          <el-col :span="6"  style="width: 200px;">
            <div style="position:relative;top:8px;font-size: 20px;font-weight: 600;color: white;line-height:35px">
              购物商城
            </div>
            <div style="position:relative;bottom:14px;font-size:16px;font-weight: 500;color: white;line-height:45px">
              shopSystem
            </div>
          </el-col>
          <el-col :span="12" style="width: 150px;">
            <el-row>
              <el-col :span="6">
                <div style="cursor:pointer">
                  <el-menu
                    :default-active="this.$route.path" 
                    :router="true"
                    mode="horizontal"
                    background-color="#f66715"
                    text-color="white"
                    active-text-color="#f66715">
                    <el-menu-item index="personalHomepage/HomePage">首页</el-menu-item>
                    <!-- <el-submenu index="2">
                      <template slot="title">我的商城</template>
                    </el-submenu> -->
                  </el-menu>
                    <div style="margin:-60px;color:white;width: 310px;" @click="goToShoppingMall">我的商城</div>
                </div>
                
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6"  style="width: 200px;">

          </el-col>
        </el-header>
        <el-container>
          <el-aside width="220px">
            <!-- //默认进入后台时，哪些导航是全部展开 -->
          <el-menu
               :default-active="this.$route.path" 
               :router="true"
               active-text-color="#f66715">
          <!--左侧项目-->
              <el-menu-item> 全部功能 </el-menu-item>
              <el-menu-item class="sort-item" index="/personalHomepage/singlePage" @mouseenter="setSortHover">个人主页</el-menu-item>
              <el-menu-item class="sort-item" index="/shoppingTrolley" @mouseenter="setSortHover">我的购物车</el-menu-item>
              <el-menu-item class="sort-item" index="/personalHomepage/collect" @mouseenter="setSortHover">我的评论</el-menu-item>
              <el-menu-item class="sort-item" index="/personalHomepage/purchasedGoods" @mouseenter="setSortHover">已买到的宝贝</el-menu-item>
          </el-menu>
          </el-aside>
          <div class="line"></div>
          <el-main>
            <router-view></router-view> 
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script>
  import {userInfo} from "../ajax/get"
//   import {addGoodsOrder} from "../ajax/post"
//   import defaultValue from "../utils/defalutValue"
  export default {
      name: "personalHomepage",
      data () {
          return {
            nickName: "", // 昵称
          };
      },
      methods: {
        goToLogin() {
            this.$router.push({
                path: '/shopLogin',
                query: {
                    path: 'personalHomepage'
                }
            })
        },
        goToShoppingMall(){
          this.$router.push({
            path: '/ShoppingMall',
                query: {
                    path: 'personalHomepage'
                }
          })
        },
        // 查找用户信息
        findUserInfo(userName) {
          console.log(111);
          console.log("userName",userName);
            userInfo(userName).then(res => {
                console.log("用户信息:",res);
                this.nickName = res.data.data.nickName;
            })
        },
        setSortHover: function () {
          $(".sort-item").hover(function(){
              $(this).css("color","white");
              $(this).addClass("skin-bg")
          }, function(){
              $(this).css("color","#f66715");
              $(this).removeClass("skin-bg")
          });
        },
      },
      created() {
        this.findUserInfo(sessionStorage.getItem("userName"));
          
      }
  }
  </script>
  
  <style scoped>
    @import "../assets/css/personalHomepage.css";
  </style>